<script setup>
  import MyItem from "@/components/MyItem";
  import {defineComponent} from "vue";

  defineComponent({
    MyItem
  })

  defineProps({
    tableData: Array
  })
</script>

<template>
  <div class="todo-main">
    <ul>
      <transition-group appear
                        name="animate__animated animate__bounce"
                        enter-active-class="animate__lightSpeedInRight"
                        leave-active-class="animate__lightSpeedOutRight"
      >
        <MyItem v-for="todoObj of tableData"
                :key="todoObj.id"
                :todo="todoObj"
        ></MyItem>
      </transition-group>
    </ul>
  </div>
</template>

<style scoped>
  .todo-main {
    border: 1px solid #cccccc;
    border-radius: 2%;
    margin-top: 10px;
  }
</style>
